import { ElProgress } from 'element-plus';

const WAIT = 1; // 等待|未开始
const INPROGRESS = 2; // 进行中
const COMPLETED = 3; // 已完成
const ANOMALY = 4; // 异常
const CANCELLED = 5; // 已取消
const INEFFECTIVE = 6; // 已失效
const FAIL = 7; // 失败

// 状态颜色
const StatusColorOption = {
    [WAIT]: '#FFD500',
    [INPROGRESS]: '#2FB6E4',
    [ANOMALY]: '#F14144',
    [CANCELLED]: '#D8D8D8',
    [COMPLETED]: '#32D1AD',
    [INEFFECTIVE]: '#D8D8D8',
    [FAIL]: '#F14144'
};

// 进度条颜色
const ProgressColor = {
    [WAIT]: '#FFD500',
    [INPROGRESS]: '#5AB8F9',
    [COMPLETED]: '#32D1AD',
    [ANOMALY]: '#F14144',
    [INEFFECTIVE]: '#32D1AD',
    [FAIL]: '#F14144'
};
const formatter = (row: any, column: any, cellValue: any) => {
    return cellValue || '-';
};

export function tableColumnOption(operateOption: OperateOption) {
    return [
        {
            prop: 'id',
            label: '编号',
            showOverflowTooltip: true,
            sortable: 'custom',
            width: 100
        },
        {
            prop: 'task_name',
            label: '标题',
            showOverflowTooltip: true,
            width: 220
        },
        {
            prop: 'type_name',
            label: '功能类型',
            showOverflowTooltip: true,
            width: 130
        },
        {
            prop: 'sub_type_name',
            label: '子功能类型',
            showOverflowTooltip: true,
            width: 130
        },
        {
            prop: 'module_type_name',
            label: '所属模块',
            showOverflowTooltip: true,
            width: 300
        },
        {
            prop: 'task_state_name',
            label: '状态',
            width: 150,
            render({ row }: rowSlotOption) {
                return (
                    <div
                        class="status_point"
                        style={{
                            '--status-bgcolor': StatusColorOption[row.task_state] ?? '#D8D8D8'
                        }}>
                        {row.task_state_name}
                    </div>
                );
            }
        },
        {
            prop: 'line_total',
            label: '进度',
            width: 220,
            render({ row }: rowSlotOption) {
                const progressNum = (+row.line_total_success || 0) + (+row.line_total_fail || 0);
                const percentage = progressNum ? Number(Math.floor((progressNum / (+row.line_total || 0)) * 100)) : 0;

                const isOver = [COMPLETED, INEFFECTIVE].includes(row.task_state);
                return row.task_state === CANCELLED ? (
                    <div></div>
                ) : (
                    <div>
                        {
                            // 已完成 || 已失效
                            isOver ? (
                                <>
                                    <span class="total_num">{`总数${row.line_total}`}</span>
                                    <span class="sussess_num">{`成功${row.line_total_success}`}</span>
                                    <span class="fail_num">{`失败${row.line_total_fail}`}</span>
                                </>
                            ) : // 失败 异常
                            row.task_state === FAIL || row.task_state === ANOMALY ? (
                                <>
                                    <span class="total_num">
                                        {' '}
                                        {progressNum} / {row.line_total || 0}{' '}
                                    </span>
                                    <span class="sussess_num">{`成功${row.line_total_success}`}</span>
                                    <span class="fail_num">{`失败${row.line_total_fail}`}</span>
                                </>
                            ) : (
                                // 非异常
                                <span class="total_num">
                                    {' '}
                                    {progressNum} / {row.line_total || 0}{' '}
                                </span>
                            )
                        }
                        <ElProgress
                            stroke-width={8}
                            color={ProgressColor[row.task_state]}
                            percentage={ Number.isFinite(percentage) && row.line_total != 0 ? percentage : 100}
                            status={isOver ? 'success' : row.task_state === ANOMALY ? 'warning' : undefined}
                        />
                    </div>
                );
            }
        },
        {
            prop: 'begin_time',
            label: '开始时间',
            width: 200,
            sortable: 'custom',
            formatter
        },
        {
            prop: 'finish_time',
            label: '完成时间',
            width: 200,
            sortable: 'custom',
            formatter
        },
        {
            prop: 'created_uid_name',
            label: '操作者',
            showOverflowTooltip: true,
            minWidth: 100
        },
        {
            prop: 'operate',
            label: '操作',
            minWidth: 210,
            fixed: 'right',
            isOperate: true,
            option: [
                {
                    name: '取消',
                    authCode: 'CANCEL_TASK',
                    isRender: ({ row }: rowSlotOption) => {
                        // 判断条件  状态为等待中 并且 pid 为 0 （pid大于0是子任务）
                        return row.task_state === WAIT && row.pid === 0;
                    },
                    click: operateOption.cancel
                },
                {
                    name: '详情',
                    authCode: 'DETAIL_TASK',
                    isRender: ({ row }: rowSlotOption) => {
                        // 已完成或已失效 && 不是启用会员通店铺初始化类型
                        return row.is_info;
                    },
                    click: operateOption.detail
                },
                {
                    name: '下载文件',
                    authCode: 'DOWNLOAD_TASK',
                    isRender: ({ row }: rowSlotOption) => {
                        // 已完成并且是导出任务
                        return row.task_state === COMPLETED && row.type === 2;
                    },
                    click: operateOption.download
                }
            ]
        }
    ];
}

interface OperateOption {
    // reloadExec: Function, // 重新执行
    // continueExec: Function, // 继续执行
    cancel: Function; // 取消
    detail: Function; // 详情
    download: Function; // 下载文件
}

export interface RowOption {
    pid: number;
    id: number; //活动ID
    task_name: string;
    type: number; //1 开启 2 关闭
    module_type: number;
    task_state: number;
    line_total: number;
    line_total_success: number;
    line_total_fail: number;
    begin_time: string;
    finish_time: string;
    created_uid: number;
    type_name: string;
    module_type_name: string;
    created_uid_name: string;
    task_state_name: string;
    is_info: boolean;
}

interface rowSlotOption {
    row: RowOption;
    index?: number;
    column?: RowOption[];
}
